import Head from "next/head";
import Link from "next/link";
// 头部组件
import Header from "../components/Header";
// 个人信息组件
import Author from "../components/Author";
// 广告组件
import Advert from "../components/Advert";
// 脚步底部
import Footer from "../components/Footer";
import { Row, Col, List, Icon } from "antd";
import React, { useState, useEffect } from "react";
import "../public/style/pages/index.css";
import axios from "axios";
import servicePath from "../config/apiUrl";
import marked from "marked";
import hljs from "highlight.js";
import "highlight.js/styles/monokai-sublime.css";
import canvasNest from "../public/canvas-nest.js";

const Home = (list) => {
    const [mylist, setMylist] = useState(list.data);
    const renderer = new marked.Renderer();
    const componentDidMount = () => {
        const script = document.createElement("script");

        script.src =
            "https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js";
        script.async = true;

        document.body.appendChild(script);
        // canvas特效
        canvasNest();

        setTimeout(() => {
            window.L2Dwidget.init({
                pluginRootPath: "live2dw/",
                pluginJsPath: "lib/",
                pluginModelPath: "live2d-widget-model-z16/assets/",
                tagMode: false,
                debug: false,
                model: { jsonPath: "../live2dw/live2d-widget-model-z16/assets/z16.model.json" },
                display: { position: "right", width: 100, height: 200 },
                mobile: { show: true },
                log: false,
            });
        }, 1000);
    };
    useEffect(() => {
        // 使用浏览器API更新页面标题
        componentDidMount();
    });
    marked.setOptions({
        renderer: renderer,
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        sanitize: false,
        xhtml: false,
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        },
    });
    return (
        <div className="container">
            <Head>
                <title>Home</title>
            </Head>
            <Header></Header>
            <Row className="comm-main" type="flex" justify="center">
                <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
                    <div>
                        <List
                            header={<div>最新日志</div>}
                            itemLayout="vertical"
                            dataSource={mylist}
                            renderItem={(item) => (
                                <List.Item>
                                    <div className="list-title">
                                        <Link
                                            href={{ pathname: "/detailed", query: { id: item.id } }}
                                        >
                                            <a>{item.title}</a>
                                        </Link>
                                    </div>
                                    <div className="list-icon">
                                        <span>
                                            <Icon type="calendar" /> {item.addTime || "暂无时间"}
                                        </span>
                                        <span>
                                            <Icon type="folder" /> {item.typeName}
                                        </span>
                                        <span>
                                            <Icon type="fire" /> {item.view_count}人
                                        </span>
                                    </div>
                                    <div
                                        className="list-context"
                                        dangerouslySetInnerHTML={{ __html: marked(item.introduce) }}
                                    ></div>
                                </List.Item>
                            )}
                        ></List>
                    </div>
                </Col>
                <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
                    <Author></Author>
                    <Advert></Advert>
                </Col>
            </Row>
            <Footer></Footer>
        </div>
    );
};
Home.getInitialProps = async () => {
    const promise = new Promise((resolve) => {
        axios(servicePath.getArticleList).then((res) => {
            resolve(res.data);
        });
    });

    return await promise;
};

export default Home;
